<template>
  <div
    class="grid-box animate__animated"
    :class="dynamicClassName"
    :style="backgroundStyle"
  >
    <TableScroll :container-height="containerHeight" :speed="10">
      <ul class="bar-table-list">
        <li v-for="(item, index) in list" :key="index">
          <p>
            <span class="index">NO.{{ index + 1 }}</span>
            <span class="name">{{ item.name }}</span>
            <span class="total num"
              ><em>{{ item.total }}</em
              >件</span
            >
            <span class="num"
              ><em>{{ item.value }}</em
              >{{ item.unit }}</span
            >
          </p>
          <p class="bar-wrap">
            <i
              :style="'width:' + item.value + '%;background: ' + barcolor + ';'"
            ></i>
          </p>
        </li></ul
    ></TableScroll>
  </div>
</template>
<script>
//引入封装方法
import encapsulation from "../../utils/aircimGird";
import TableScroll from "../../components/elements/TableScroll.vue";
export default {
  components: {
    TableScroll,
  },
  //混入封装方法
  mixins: [encapsulation],
  props: {
    barcolor: {
      type: String,
      default:
        "linear-gradient(90deg, rgba(56, 137, 141, 0.00) -6.55%, #38898D 88.1%)",
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    containerHeight: {
      type: Number,
      default: 160,
    },
  },
  computed: {
    //设置套系边框(根据主题切换底色边框样式) 以及设置图表背景颜色
    backgroundStyle() {
      let styleObject = {};
      styleObject["background-image"] = "none";

      return styleObject;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../static/assets/common.scss";
</style>
<style lang="scss" scoped>
.grid-box {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 10px 10px 15px 10px;
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .grid-charts {
    width: 100%;
    height: 100%;
  }
}

.bar-table-list {
  margin-top: 14px;

  li {
    & + li {
      margin-top: 14px;
    }

    p {
      display: flex;
      line-height: 28px;
      align-items: center;
    }
    &:nth-child(1) {
      .index {
        background: url(../../static/assets/barhorizontal/NO1.png) no-repeat
          left center;
      }
    }
    &:nth-child(2) {
      .index {
        background: url(../../static/assets/barhorizontal/NO2.png) no-repeat
          left center;
      }
    }

    &:nth-child(3) {
      .index {
        background: url(../../static/assets/barhorizontal/NO3.png) no-repeat
          left center;
      }
    }

    &:nth-child(4) {
      .index {
        background: url(../../static/assets/barhorizontal/NO4.png) no-repeat
          left center;
      }
    }
  }

  .index {
    padding-left: 18px;
    width: 55px;
    font-family: D-DIN;
    font-size: 18.001px;
    font-weight: 700;
    background: url(../../static/assets/barhorizontal/NO4.png) no-repeat left
      center;
  }

  .name {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .num {
    width: 74px;
    em {
      color: #fff;
    }
    &:last-of-type {
      margin-left: auto;
    }
  }

  .bar-wrap {
    margin-top: 11px;
    background: rgba(3, 171, 224, 0.2);
    height: 10px;

    i {
      position: relative;
      display: block;
      height: 100%;
      background: linear-gradient(
        90deg,
        rgba(56, 137, 141, 0) -6.55%,
        #38898d 88.1%
      );
      -webkit-animation: bargrow 0.8s linear;
      animation: bargrow 0.8s linear;

      &::after {
        content: "";
        position: absolute;
        right: 0;
        height: 100%;
        right: 0;
        width: 3px;
        background-color: #fff;
      }
    }
  }
}

@-webkit-keyframes bargrow {
  0% {
    width: 0;
  }
}

@keyframes bargrow {
  0% {
    width: 0;
  }
}
</style>
